<!--  -->
<template>
  <el-image-viewer v-if="info.show" @close="onClose" :url-list="info.urlList" :hide-on-click-modal="info.hideOnClickModal" :initialIndex="info.initialIndex" @switch="onSwitch"/>
  <div v-if="info.show" class="image-viewer-info">
    {{info.nowShowIndex + 1}} / {{info.total}}
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const info = reactive({
  // 传入的prop
  hideOnClickModal: true,
  initialIndex: 0,
  urlList: [],
  // 内部prop
  show: false,
  nowShowIndex: 0,
  total: 0,
})

// 函数式调用
let backupInfo = {};
const open = (data)=>{
  backupInfo = {...data};//数据备份

  info.initialIndex = data.initialIndex || 0;
  info.hideOnClickModal = data.hideOnClickModal===false?false:true;
  info.urlList = data.urlList || [];

  info.show = true;
  info.nowShowIndex = data.initialIndex || 0;
  info.total = data.urlList?.length;
}

const onClose = ()=>{
  info.show = false;
  info.nowShowIndex = 0;
  backupInfo.close?backupInfo.close():null;
}

const onSwitch = (val)=>{
  info.nowShowIndex = val;
  backupInfo.switch?backupInfo.switch(val):null;
}

defineExpose({
  open,
})
</script>
<style scoped lang="scss">
.image-viewer-info{
  position: fixed;
  top: 24px;
  left: 24px;
  color: rgb(255, 255, 255);
  z-index: 3000;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>